import React, { Component } from 'react'
import { reqUserList, reqUserUpdate } from "../../../api"
import { Card, Tag, message, Table, Button, Modal, Form, Input, Select } from 'antd'
import { to } from 'await-to-js'

const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
    // eslint-disable-next-line
    class extends React.Component {
        render() {
            const { visible, onCancel, onOk, form, record } = this.props;
            const { getFieldDecorator } = form;
            const { username, phone, status, role } = record
            return (
                <Modal
                    visible={visible}
                    title="修改用户信息"
                    onCancel={onCancel}
                    onOk={onOk}
                >
                    <Form layout="vertical">
                        <Form.Item label="用户名">
                            {getFieldDecorator('username', {
                                initialValue: username
                            })(<Input disabled />)}
                        </Form.Item>

                        <Form.Item label="手机号">
                            {getFieldDecorator('phone', {
                                initialValue: phone
                            })(<Input disabled />)}
                        </Form.Item>

                        <Form.Item label="状态">
                            {getFieldDecorator('status', {
                                initialValue: status
                            })(
                                <Select placeholder="请选择状态">
                                    <Select.Option value={1}>正常</Select.Option>
                                    <Select.Option value={2}>冻结</Select.Option>
                                </Select>,
                            )}
                        </Form.Item>

                        <Form.Item label="角色">
                            {getFieldDecorator('role', {
                                initialValue: role
                            })(
                                <Select placeholder="请选择状态">
                                    <Select.Option value={1}>管理员</Select.Option>
                                    <Select.Option value={2}>普通用户</Select.Option>
                                    <Select.Option value={3}>超级游客</Select.Option>
                                </Select>,
                            )}
                        </Form.Item>
                    </Form>
                </Modal>
            );
        }
    },
);

export default class UserLIst extends Component {
    state = {
        current: 1,
        size: 12,
        total: 0,
        loading: false,
        dataSource: [],
        visible: false,
        currentRecord: {}

    }

    async componentDidMount() {
        this.getUserList()
    }

    getUserList = async () => {
        this.setState({ loading: true })
        let [err, res] = await to(reqUserList(this.state.current, this.state.size))
        this.setState({ loading: false })
        if (err) return console.log(err)
        if (res.code !== 0) return message.error(res.msg)

        let userList = res.body.list
        this.setState({
            dataSource: userList,
            total: res.body.total
        })
    }
    showEditModal = (record) => {
        this.setState({ currentRecord: record, visible: true })
    }
    handleCancel = () => {
        this.setState({ visible: false });
    };

    handleOk= () => {
        const { form } = this.formRef.props;
        form.validateFields( async (err, values) => {
            if (err) {
                return;
            }
            const {status, role } = values
            let [error, res] = await to(reqUserUpdate({status, role, targetId: this.state.currentRecord._id }))
            if(error) return console.log(error)
            if(res.code !== 0) return message.error(res.msg)
            message.success(res.msg)
            form.resetFields();
            this.setState({ visible: false, currentRecord: {} });
            this.getUserList()
        });
    };

    saveFormRef = formRef => {
        this.formRef = formRef;
    };

    render() {
        const { dataSource, total, size, loading, visible, currentRecord } = this.state
        const columns = [
            // { title: '站点名称', dataIndex: 'siteName', key: 'siteName' },
            { title: '用户名', dataIndex: 'username', key: 'username' },
            { title: '电话', dataIndex: 'phone', key: 'phone' },
            { title: '注册时间', dataIndex: 'ctime', key: 'ctime' },
            { title: '状态', dataIndex: 'status', key: 'status', render: text => <Tag color={text === 1 ? 'green' : 'red'}>{text === 1 ? '正常' : '冻结'}</Tag> },
            { title: '角色', dataIndex: 'role', key: 'role', render: text => <span>{text === 1 ? '管理员' : text === 2 ? '普通用户' : '超级游客'}</span> },
            { title: '操作', dataIndex: '', key: 'cz', render: record => <Button type="link" onClick={() => { this.showEditModal(record) }}>编辑</Button> },

        ]

        return (
            <Card style={{ height: '100%' }} title="用户列表">
                <Table
                    dataSource={dataSource}
                    columns={columns}
                    rowKey='_id'
                    pagination={{ total, defaultPageSize: size }}
                    loading={loading}
                    onChange={this.handleTableChange}
                />
                <CollectionCreateForm
                    wrappedComponentRef={this.saveFormRef}
                    visible={visible}
                    onCancel={this.handleCancel}
                    onOk={this.handleOk}
                    record={currentRecord}
                />
            </Card >
        )
    }
}
